let timerId;
let timerOutId;
const dateDom = document.querySelector('#date');
const timeDom = document.querySelector('#timer');
/**
 * 格式化数字：小于10前面加0
 * @param {number} n 格式化的数字
 */
const formatDate = (n) => {
  return n >= 10 ? n : `0${n}`;
};
/**
 * 获取时间
 */
const getDate = () => {
  const date = new Date();
  return {
    M: formatDate(date.getMonth() + 1),
    D: formatDate(date.getDate()),
    h: formatDate(date.getHours()),
    m: formatDate(date.getMinutes()),
  };
};
/**
 * 生成日期DOM
 */
const createDateElement = () => {
  const resultDom = ` <span class="vertical">${getDate().M}</span>
  <span class="vertical date-font">月</span>
  <span class="vertical">${getDate().D}</span>
  <span class="vertical date-font">日</span>`;
  dateDom.innerHTML = resultDom;
};
/**
 * 生成时分DOM
 */
const createTimeElement = () => {
  let flag;
  setInterval(() => {
    const resultDom = `<span class="vertical">${getDate().h}</span>
    <span class="symbol" style="opacity:${flag ? 1 : 0}">:</span>
    <span class="vertical">${getDate().m}</span>`;
    timeDom.innerHTML = resultDom;
    flag = !flag;
  }, 1000);
};

void (function () {
  clearTimeout(timerOutId);
  clearInterval(timerId);
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
    const bodyDom = document.querySelector('body');
    bodyDom.innerHTML = `<h1>您这屏幕尺寸不太行</h1>
    <img src="./1.png" alt="">`;
  } else {
    timerOutId = setTimeout(() => {
      createTimeElement();
      createDateElement();
    }, 2333);
  }
})();
